// 生成代码
// 页面显示一个按钮：创建窗口
import { Button, Divider, Form, Input } from 'antd';
import './index.scss';
import { useEffect, useState } from 'react';

function MultiWindowPage() {
  const [returnRes, setreturnRes] = useState('');
  const createNewWindow = () => {
    window.electronAPI.createAIWindow(600, 400);
  };

  const validateMessages = {
    required: '请输入！',
  };
  const onFinish = async (values: any) => {
    try {
      const resFromAiWindow = await window.electronAPI.sendMessageToAIWindow(
        values.message,
      );
      setreturnRes(resFromAiWindow.message);
    } catch (error) {
      console.log(error);
      setreturnRes('子窗口未创建！');
    }

  };

  return (
    <div className="create-window-page-container">
      <Button type="primary" onClick={createNewWindow}>
        创建窗口
      </Button>
      <Divider />
      <Form
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        name="nest-messages"
        onFinish={onFinish}
        style={{ maxWidth: 600 }}
        validateMessages={validateMessages}
      >
        <Form.Item
          name="message"
          label="发送消息："
          rules={[{ required: true }]}
        >
          <Input.TextArea />
        </Form.Item>
        <Form.Item label="返回消息：">{returnRes}</Form.Item>
        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default MultiWindowPage;
